<template>
  <div class="my-transaction-details">
    <!-- :style="{ background: '#fff', color: '#919499', fontSize: '12px' }" -->
    <a-table
      :columns="columns"
      :data-source="tableData"
      :row-key="'orderId'"
      :style="{ fontSize: '12px' }"
      :header-cell-style="{ background: '#fff', color: '#919499' }"
    >
    </a-table>
  </div>
</template>

<script setup>
import { ref, inject, onMounted } from "vue";
import { limitColumns, stopLossColumns } from "./tableColumns.js";
import { transDetails } from "@/data/mockData.js";
import { get } from "@/http/http.js";

const columns = ref(limitColumns); // 设置默认列
const tableData = ref(transDetails); // 设置默认数据
const transactionParams = inject("transactionParams", ref({}));

onMounted(() => {
  getSpotCurrentComm();
  console.log("组件挂载，初始参数：", transactionParams.value);
  // generateTable(transactionParams.value);
});
const getSpotCurrentComm = () => {
  const params = {
    buyOrSell: transactionParams.value.buyOrSell,
    endTime: transactionParams.value.endTime,
    startTime: transactionParams.value.startTime,
    timeSlot: transactionParams.value.timeSlot.innerText,
    transType: transactionParams.value.transType.querySelector(
      ".mantine-w1aeuy > span"
    ).innerText,
  };
  get("/spotCurrentCommission", params)
    .then((res) => {
      console.log("transaction Response111222555777888:", res);
      tableData.value = res.data || [];
      generateTable(transactionParams.value);
    })
    .catch((err) => {
      console.error("spotCurrentCommission Error fetching data:", err);
    });
};
// 生成表格数据
const generateTable = (params) => {
  if (!params || !params.transType) return;
  // 更新列
  if (params.transType.innerText === "限价 | 市价") {
    columns.value = [...limitColumns];
  } else {
    columns.value = [...stopLossColumns];
  }

  // tableData.value = [...transDetails];
};

// 监听params的变化
// const stopWatch = watch(() => transactionParams.value, (newParams) => {
//   console.log('收到新的参数：', newParams);
//   generateTable(newParams);
// }, { deep: true });

// 组件挂载时初始化表格
// onMounted(() => {
//   console.log('组件挂载，初始参数：', transactionParams.value);
//   generateTable(transactionParams.value);
// });

// 在组件卸载前停止监听
// onBeforeUnmount(() => {
//   if (stopWatch) {
//     stopWatch();
//   }
// });
</script>

<style scoped>
.my-transaction-details-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.my-transaction-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 99999;
}
/* ::v-deep .ant-table-thead > tr > th {
  background: #fff !important;
  color: #919499 !important;
} */
:deep(.ant-table-thead > tr > th) {
  background: #fff !important;
  color: #919499 !important;
}
</style>
